﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0042)http://jscs.cloudapp.net/ControlsSample/CM -->
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>右键菜单</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<LINK rel=stylesheet type=text/css href="css/main.css">
<LINK rel=stylesheet type=text/css href="css/contextmenu.css">
<STYLE type=text/css>
	.target {
		BORDER-BOTTOM: #ffccee 1px solid; POSITION: absolute; BORDER-LEFT: #ffccee 1px solid; PADDING-BOTTOM: 5px; BACKGROUND-COLOR: blue; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; COLOR: #fff; BORDER-TOP: #ffccee 1px solid; TOP: 400px; BORDER-RIGHT: #ffccee 1px solid; PADDING-TOP: 5px; LEFT: 200px
	}
</STYLE>

<SCRIPT type=text/javascript src="js/jquery-1.4.2.js"></SCRIPT>

<SCRIPT type=text/javascript src="js/jquery.contextmenu.js"></SCRIPT>

<SCRIPT type=text/javascript>
        $().ready(function() {
            var option = { width: 150, items: [
                            { text: "第一项", icon: "images/icons/ico1.gif", alias: "1-1", action: menuAction ,data:"ddddd"},
                            { text: "第二项", icon: "images/icons/ico2.gif", alias: "1-2", action: menuAction },
                            { text: "第三项", icon: "images/icons/icon_default.gif", alias: "1-3", action: menuAction },
                            { type: "splitLine" },
                            { text: "组一集合", icon: "images/icons/icon_default.gif", alias: "1-4", type: "group", width: 170, items: [
	                            { text: "组三集合", icon: "images/icons/icon_default.gif", alias: "2-2", type: "group", width: 190, items: [
		                            { text: "组3一项", icon: "images/icons/icon_default.gif", alias: "3-1", action: menuAction },
		                            { text: "组3二项", icon: "images/icons/icon_default.gif", alias: "3-2", action: menuAction }
	                            ]
	                            },
	                            { text: "组1一项", icon: "images/icons/icon_default.gif", alias: "2-1", action: menuAction },
	                            { text: "组1二项", icon: "images/icons/icon_default.gif", alias: "2-3", action: menuAction },
	                            { text: "组1三项", icon: "images/icons/icon_default.gif", alias: "2-4", action: menuAction }
                            ]
                            },
                            { type: "splitLine" },
                            { text: "第四项", icon: "images/icons/icon_default.gif", alias: "1-5", action: menuAction },
                            { text: "组二集合", icon: "images/icons/icon_default.gif", alias: "1-6", type: "group", width: 180, items: [
	                            { text: "组2一项", icon: "images/icons/icon_default.gif", alias: "4-1", action: menuAction },
	                            { text: "组2二项", icon: "images/icons/icon_default.gif", alias: "4-2", action: menuAction }
                            ]
                            }
                            ], onShow: applyrule,
                onContextMenu: BeforeContextMenu
            };
            function menuAction(target){
            	//target.selection.createRange();
              //target.value=this.data.data;
             // alert(document.selection);
              insertText(target,this.data.data);
            }
            function applyrule(menu) {               
                if (this.id == "target2") {
                    menu.applyrule({ name: "target2",
                        disable: true,
                        items: ["1-2", "2-3", "2-4", "1-6"]
                    });
                }
                else {
                    menu.applyrule({ name: "all",
                        disable: true,
                        items: []
                    });
                }
            }
            function BeforeContextMenu() {
                return this.id != "target3";
            }
            $("#target,#target2,#target3").contextmenu(option);
            
						function insertText(target,val){
							target.focus();
							if($.browser.msie){
								document.selection.createRange().text = val;
							}else if (target.selectionStart || target.selectionStart == '0') {
								var startPos = target.selectionStart;
								var endPos = target.selectionEnd;
								var scrollTop = target.scrollTop;
								target.value = target.value.substring(0, startPos) + val + target.value.substring(endPos, target.value.length);
								//target.focus();
								target.selectionStart = startPos + val.length;
								target.selectionEnd = startPos + val.length;
								target.scrollTop = scrollTop;
							}
							else {
								target.value += val;
							}
							target.focus();
						}
        });
    </SCRIPT>

<META name=GENERATOR content="MSHTML 8.00.6001.18975"></HEAD>
<BODY>
<DIV class=info>右键菜单示例</DIV>
<DIV id=target1 class=target>在这里右击[所有菜单]</DIV>
<DIV style="TOP: 100px; LEFT: 600px" id=target2 class=target>在这里右击[disable某些项]</DIV>
<DIV style="TOP: 500px; LEFT: 400px" id=target3 class=target>在这里右击[这个右键不能显示]</DIV>
<textarea style="width:400px;height:200px;" id=target>sdfdsfsd</textarea>
</BODY>
</HTML>
